<template>
  <h1>这是一个测试页面</h1>
  <p>{{info}}</p>
  <p>{{info}} + ':12-02'</p>
<!-- 点击事件绑定 ，f()名字是自己起的-->
  <button @click="f()">按钮</button>
  <hr/>
 <!--v-text是文本-->
<!-- 引入的info的内容包括<b>字符，而不是文字加粗的效果 -->
  <p v-text="info"></p>
  <!--v-html，是页面，加的是标签的内容可以生效,最终引入效果是将更新二字加粗-->
  <p v-html="info"></p>
</template>

<!--vue3的特性，script标签需要添加setup-->
<script setup>
 import {ref} from "vue";
 //添加变量[默认是常量]
 const  info = ref("测试");
 const f = () =>{  //==>固定写法
   /*info.value="值发生改变！！";*/
   info.value="值<b>更新</b>了!"
 }
</script>

<style scoped>

</style>